<template>
    <el-card class="custom-card">
        <template #header>
            <div class="card-header">
                <span>我的订单</span>
            </div>
        </template>

        <el-row :gutter="20" class="appointment-list">
            <el-col :span="24" v-for="(appointment, index) in appointments" :key="index">
                <el-card class="box-card modern-card">
                    <div class="card-header clearfix">
                        <span>订单号: {{ appointment.appointmentId }}</span>
                        <el-tag :type="appointment.appointmentStatus >= 2 ? 'success' : 'danger'" size="medium"
                            effect="light" style="float: right;">
                            <el-icon v-if="appointment.appointmentStatus === 2 || appointment.appointmentStatus === 3"
                                name="check" />
                            <span>{{ getStatusText(appointment.appointmentStatus) }}</span>
                        </el-tag>
                    </div>

                    <el-row>
                        <el-col :span="8">
                            <div class="info-column">
                                <div class="info-item">用户: {{ appointment.user.realName }}</div>
                                <div class="info-item">部门: {{ appointment.department.departmentName }}</div>
                                <div class="info-item">服务种类: {{ appointment.type.typeName }}</div>
                                <div class="info-item">问题描述: {{ appointment.problem }}</div>
                            </div>
                        </el-col>

                        <el-col :span="8" class="progress-column">
                            <el-progress type="circle" :percentage="appointment.speed * 10" stroke-width="26" show-text />
                            <div class="info-item" v-if="appointment.emp != null">服务人员: {{ appointment.emp.realName }}
                            </div>
                        </el-col>

                        <el-col :span="8">
                            <div class="info-item">配件使用情况:</div>
                            <ul class="parts-list">
                                <li v-for="part in appointment.parts" :key="part.id">
                                    {{ part.part.partName }} - 数量: {{ part.quantity }} - 生产厂商: {{ part.part.supplier }}
                                </li>
                            </ul>
                        </el-col>
                    </el-row>

                    <div class="actions">
                        <el-button type="primary" @click="viewDetails(appointment)">查看详情</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row class="pagination-row" justify="center">
            <el-col :span="8">
                <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                    @current-change="getAppointment" />
            </el-col>
        </el-row>

        <el-dialog v-model="dialogVisible" title="订单详情" width="50%">
            <el-form :model="selectedAppointment" label-width="120px" disabled>
                <el-form-item label="订单号">
                    <el-input v-model="selectedAppointment.appointmentId" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户">
                    <el-input v-model="selectedAppointment.user.realName" disabled></el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-input v-model="selectedAppointment.department.departmentName" disabled></el-input>
                </el-form-item>
                <el-form-item label="服务种类">
                    <el-input v-model="selectedAppointment.type.typeName" disabled></el-input>
                </el-form-item>
                <el-form-item label="问题描述">
                    <el-input v-model="selectedAppointment.problem" disabled></el-input>
                </el-form-item>
                <el-form-item v-if="selectedAppointment.emp" label="服务人员">
                    <el-input v-model="selectedAppointment.emp.realName" disabled></el-input>
                </el-form-item>
                <el-form-item label="配件使用情况">
                    <ul>
                        <li v-for="part in selectedAppointment.parts" :key="part.id">
                            {{ part.part.partName }} - 数量: {{ part.quantity }} - 生产厂商: {{ part.part.supplier }}
                        </li>
                    </ul>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>

<script setup>
import orderApi from '@/api/orderApi';
import { ref } from 'vue';

const pageInfo = ref({});
const appointments = ref([]); // 空数组用于存放订单数据
const dialogVisible = ref(false); // 控制弹出框显示
const selectedAppointment = ref({}); // 存放选中的订单详情

// 获取订单信息
const getAppointment = (page) => {
    let id = sessionStorage.getItem("userInfoUserId");
    orderApi.getAll(page, id)
        .then(resp => {
            if (resp.code === 10000) {
                pageInfo.value = resp.data;
                appointments.value = resp.data.list;
            }
        });
};

// 查看详情
const viewDetails = (appointment) => {
    selectedAppointment.value = appointment;
    dialogVisible.value = true;
};

// 获取状态文本
const getStatusText = (status) => {
    const statusMap = {
        0: '已提交',
        1: '已取消',
        2: '进行中',
        3: '已完成',
    };
    return statusMap[status] || '未知';
};

// 初始化加载订单
getAppointment(1);
</script>

<style scoped>
.el-progress--line {
    margin-bottom: 15px;
    max-width: 600px;
}

.custom-card {
    padding: 15px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.modern-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 15px;
}

.card-header {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.info-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progress-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.parts-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.actions {
    text-align: right;
    margin-top: 10px;
}

.pagination-row {
    margin-top: 20px;
}

.dialog-footer {
    text-align: right;
}
</style>
